<template>
  <div class="app-container">
    <el-tabs v-model="activeChooseGoodsName" @tab-click="handleChoooseGoodsClick">
      <el-tab-pane label="选择秒杀商品" name="goChooseGoods">
        <el-form ref="form" :model="searchForm" :rules="rules" label-width="90px" :inline="true" class="search-form">
          <el-row style="display: flex;flex-wrap: wrap;">
            <el-col :span="20">
              <el-form-item label="时间段" prop="startEndTime">
                <el-date-picker
                  v-model="searchForm.startEndTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="20" :offset="0" style="margin-top:20px;">
              <el-form-item label="搜索商品">
                <el-select
                  v-model="tempChoosedGoods"
                  style="width:400px;"
                  :multiple="false"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="关键字查询支持商品名、ID、副标题、编码"
                  :remote-method="getGoodsListWay"
                  :loading="isLoadingGoods"
                  :disabled="searchForm.startEndTime.length==0"
                  value-key="id"
                >
                  <el-option
                    v-for="item in GoodsList"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  />
                </el-select>
              </el-form-item>

            </el-col>
          </el-row>

        </el-form>

        <!-- 规格表单 -->
        <div v-if="tempChoosedGoods.product">
          <choosed-seckill-sku-comp ref="chooseSeckillSkuRef" :display="false" :list="skuList" @currentchoose="handleChooseGoods" @deleteitem="handleDeleteItem" />
        </div>

      </el-tab-pane>
      <el-tab-pane v-if="confirmGoodsSkuList.length>0" :label="'已选秒杀商品('+confirmGoodsSkuList.length+')'" name="choosedList">
        <choosed-seckill-sku-comp display :list="confirmGoodsSkuList" @deleteitem="handleDeleteItem" @currentchoose="handleChooseGoods" />
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import { getGoodsList as getGoodsListApi } from '@/api/activity/index'
import { parseTime } from '@/utils/index'
import ChoosedSeckillSkuComp from './ChoosedSeckillSku.vue'
export default {
  name: 'ChooseGoods',
  components: {
    ChoosedSeckillSkuComp
  },
  data() {
    return {
      searchForm: {
        startEndTime: []
      },
      rules: {
        startEndTime: [{ required: true, message: '时间段必选', trigger: 'blur' }]
      },
      activeChooseGoodsName: 'goChooseGoods', // goChooseGoods  choosedList
      isLoadingGoods: false,
      GoodsList: [], // 搜索出来的商品列表
      tempChoosedGoods: {},
      skuList: [],
      confirmGoodsSkuList: [] // 确定的秒杀商品列表
    }
  },
  watch: {
    tempChoosedGoods(newVal) {
      newVal.product.forEach(item => {
        this.$set(item, 'isConfirm', false)
        this.$set(item, 'isUpdate', false)
        this.$set(item, 'detail', newVal)
      })
      this.skuList = newVal.product
      this.$nextTick(() => {
        this.$refs.chooseSeckillSkuRef.refreshList(this.skuList)
      })
    }
  },

  created() {

  },
  methods: {
    handleChoooseGoodsClick(val) {
      this.activeChooseGoodsName = val.name
    },
    // 获取商品列表
    getGoodsListWay(query) {
      if (query !== '') {
        this.isLoadingGoods = true
        getGoodsListApi({
          keywords: query,
          action: 'seckill',
          start_time: parseTime(this.searchForm.startEndTime[0]),
          end_time: parseTime(this.searchForm.startEndTime[1])
        }).then(res => {
          this.isLoadingGoods = false
          this.GoodsList = res.data.list
          this.total = res.data.total
        }).catch(() => {
          this.isLoadingGoods = false
        })
      } else {
        this.GoodsList = []
      }
    },

    // 删除已选中的秒杀商品
    handleDeleteItem(seckillItem) {
      this.confirmGoodsSkuList = this.confirmGoodsSkuList.filter(item => item.product_id !== seckillItem.product_id)
      this.$emit('currentchoose', this.confirmGoodsSkuList)
    },
    // 更新数据
    updateChooseGoods(list) {
      this.confirmGoodsSkuList = list
      console.log('更新 this.confirmGoodsSkuList=>', this.confirmGoodsSkuList)
    },
    // 接收传递进来的秒杀商品
    handleChooseGoods(list) {
      this.confirmGoodsSkuList = list
      this.$emit('receivechooselist', this.confirmGoodsSkuList)
    }
  }

}
</script>

<style lang="scss" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.goodsaletr {
  border-radius: 5px;
  background-color: #f0faff;
  border: 1px solid #abdcff;
  color: #515a6e;
  font-size: 12px !important;
}

.demo-table-expand {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  color: #515a6e;

  div {
    width: 30%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
  }
}

.marginTop {
  padding: 0 15px !important;
}

</style>
<style>
.el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}

.el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}

.tox .tox-dialog-wrap__backdrop {
  z-index: 9993 !important;
}

.tox-tinymce-aux {
  z-index: 9990 !important;
}

.tox .tox-dialog {
  z-index: 9995 !important;
}

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>
